<template>
  <el-dialog title="充值" v-bind="$attrs" width="720px" custom-class="recharge-dialog" @close="$emit('close')">
    <div class="recharge-content">
      <div class="amount-section">
        <div class="section-title">充值金额</div>
        <div class="amount-options">
          <div v-for="amount in amounts" :key="amount" class="amount-item"
            :class="{ active: !isCustomAmount && selectedAmount === amount }" @click="handleAmountSelect(amount)">
            {{ amount }}元
          </div>
          <div class="amount-item custom-input" :class="{ active: isCustomAmount }">
            <el-input v-model.number="customAmount" placeholder="自定义" @focus="handleCustomFocus"
              @input="handleCustomInput">
            </el-input>
          </div>
        </div>
      </div>

      <div class="payment-section">
        <div class="section-title">充值方式</div>
        <div class="payment-options">
          <div class="payment-item" :class="{ active: paymentMethod === 'wechat' }" @click="paymentMethod = 'wechat'">
            <img src="@/assets/images/wx.svg" alt="">
            微信支付
          </div>
          <div class="payment-item" :class="{ active: paymentMethod === 'alipay' }" @click="paymentMethod = 'alipay'">
            <img src="@/assets/images/ali.svg" alt="">
            支付宝
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <el-button type="primary" class="pay-button" @click="handlePay">
        立即支付
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'RechargeDialog',
  data () {
    return {
      amounts: [10, 20, 30, 40, 50, 60, 100],
      selectedAmount: 10,
      customAmount: '',
      isCustomAmount: false,
      paymentMethod: 'wechat'
    }
  },
  methods: {
    handleAmountSelect (amount) {
      this.selectedAmount = amount
      this.isCustomAmount = false
      this.customAmount = ''
    },
    handleCustomFocus () {
      this.isCustomAmount = true
    },
    handleCustomInput (value) {
      if (value) {
        this.selectedAmount = Number(value)
      } else {
        this.selectedAmount = 10
        this.isCustomAmount = false
      }
    },
    handlePay () {
      const amount = this.isCustomAmount ? this.customAmount : this.selectedAmount
      this.$emit("pay", this.paymentMethod, amount)
      // this.$message.success(`正在使用${this.paymentMethod === 'wechat' ? '微信' : '支付宝'}支付${amount}元`)
      // this.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 0 !important;
}

.recharge-dialog {
  ::v-deep .el-dialog__header {
    padding: 20px;
    border-bottom: 1px solid #eee;

    .el-dialog__title {
      font-weight: 500;
      font-size: 18px;
      color: #00011B;
    }
  }

  .recharge-content {
    // padding: 20px;
    padding: 42px 48px 0 48px;
  }

  .section-title {
    font-weight: 400;
    font-size: 14px;
    color: rgba(0, 1, 27, 0.5);
    line-height: 16px;
    margin-bottom: 16px;
  }

  .amount-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;

    .amount-item {
      height: 48px;
      background: #f5f7fa;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s;
      color: #606266;
      font-weight: 500;
      font-size: 18px;
      color: #00011B;

      &:hover {
        background: #EDF0F7;
      }

      &.active {
        background: #165DEB;
        color: white;
      }

      &.custom-input {
        padding: 0 8px;
        cursor: default;
        background: #fff;
        border: 1px solid rgba(22, 93, 235, 0.3);


        &:hover {
          background: #fff;
        }

        &.active {
          background: #fff;
          border: 1px solid #165DEB;
        }

        ::v-deep .el-input__inner {
          height: 34px;
          border: none;
          padding: 0;
          text-align: center;
          font-size: 18px;

          &:focus {
            box-shadow: none;
          }
        }
      }
    }
  }

  .payment-section {
    margin-top: 42px;

    .payment-options {
      display: flex;
      gap: 12px;

      .payment-item {
        height: 48px;
        width: 144px;
        background: #EDF0F7;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s;
        color: #606266;

        img {
          margin-right: 6px;
          background: #fff;
          border-radius: 100%;

        }

        &:hover {
          background: #EDF0F7;
        }

        &.active {
          background: #165DEB;
          color: white;
        }
      }
    }
  }

  .footer {
    text-align: center;
    padding: 80px 0 48px 0;

    .pay-button {
      width: 304px;
      height: 49px;
      font-weight: 500;
      font-size: 18px;
      border-radius: 6px 6px 6px 6px;
    }
  }
}
</style>